<template>
	<div class="header">
		<div class="content-wrapper">
			<div class="avatar">
				<img width="64" height="64" :src="seller.avatar" alt="">
			</div>
			<div class="content">
				<div class="title">
					<span class="brand"></span>
					<span class="name">{{seller.name}}</span>
					<div class="description">
						{{seller.description}}/{{seller.deliveryTime}}分钟送达
					</div>
					<div v-if="seller.supports" class="support" @click="showDetail">
						<span class="icon" :class="classMap[seller.supports[0].type]"></span>
						<span class="text">{{seller.supports[0].description}}</span>
					</div>
				</div>
			</div>
			<div class="support-count" v-if="seller.supports">
				<span class="count">{{seller.supports.length}}个</span>
				<i class="iconfont icon-more icon-support"></i>

			</div>
		</div>
		<div class="bulletin-wrapper" @click="showDetail">
			<span class="bulletin-title"></span><span class="bulletin-text">{{seller.bulletin}}</span>
			<i class="iconfont icon-more icon-bulletin"></i>
		</div>
		<div class="background">
			<img :src="seller.avatar" alt="" width="100%" height="100%">
		</div>
		<transition name="fade">
		<div class="detail" v-show="detailShow">
			<div class="detail-wrapper clearfix">
				<div class="detail-main">
					<h1 class="detail-name">{{seller.name}}</h1>
					<div class="star-wrapper">
						<star :size="48" :score="seller.score"></star>
					</div>	
					<div class="title">
						<div class="line"></div>
						<div class="text">优惠信息</div>
						<div class="line"></div>
					</div>
					<ul v-if="seller.supports" class="supports">
						<li class="support-item" v-for="(item,index) of seller.supports">
							<span class="icon" :class="classMap[seller.supports[index].type]"></span>
							<span class="text">{{seller.supports[index].description}}</span>
						</li>
					</ul>
					<div class="title">
						<div class="line"></div>
						<div class="text">商家公告</div>
						<div class="line"></div>
					</div>
					<div class="bulletin">
						<p class="content">{{seller.bulletin}}</p>
					</div>
				</div>
			</div>
			<div class="detail-close" @click="hideDetail">
				<i class="iconfont icon-close detail-close-icon"></i>
			</div>
		</div>
		</transition>
	</div>
</template>

<script>
import star from '@/components/star/star.vue'

export default{
	data(){
		return{
			detailShow:false
		}
	},
	components:{
		star
	},
	props:{
		seller:Object
	},
	created(){
		this.classMap=['decrease','discount','special','invoice','guarantee'];
	},
	methods:{
		showDetail(){
			this.detailShow=!this.detailShow
		},
		hideDetail(){
			this.detailShow=!this.detailShow
		}
	}
}

</script>

<style lang="stylus" scoped>
@import "~@/common/stylus/mixin.styl"

.header{color:#fff;position:relative;background:rgba(7,17,27,0.5);overflow:hidden;}
.content-wrapper{padding:24px 12px 18px 24px;font-size:0;overflow:hidden;position:relative;}
.avatar{display:inline-block;overflow:hidden;vertical-align:top;}
.avatar img{border-radius:2px;}
.content{display:inline-block;font-size:14px;margin-left:16px;overflow:hidden;font-size:0;}
.title{margin:2px 0 0px 0;}
.brand{width:30px;height:18px;display:inline-block;bg-image('brand');background-size:30px 18px;background-repeat:no-repeat;vertical-align:top;}
.name{margin-left:6px;font-size:16px;line-height:18px;font-weight:bold;}
.description{margin-top:8px;margin-bottom:8px;line-height:12px;font-size:12px;}
.support{}
.icon{display:inline-block;width:12px;height:12px;margin-right:4px;background-size:12px 12px;background-repeat:no-repeat;vertical-align:top;}
.text{line-height:12px;font-size:12px;}
.support .decrease
  bg-image('decrease_1')
.support .discount
  bg-image('discount_1')
.support .guarantee
  bg-image('guarantee_1')
.support .invoice
  bg-image('invoice_1')
.support .special
  bg-image('special_1')
.support-count{position:absolute;right:12px;bottom:14px;padding:0 8px;height:24px;line-height:24px;border-radius:14px;background:rgba(0,0,0,0.2);text-align:center;}
.count{font-size:10px;}
.icon-support{font-size:10px;line-height:24px;margin-left:2px;}

.bulletin-wrapper{height:28px;line-height:28px;padding:0 24px 0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;background:rgba(7,17,27,0.2)}
.bulletin-title{display:inline-block;width:22px;height:12px;bg-image('bulletin');background-size:22px 12px;background-repeat:no-repeat;margin-top:8px;}
.bulletin-text{font-size:10px;font-weight:200;vertical-align:top;margin:0 4px;}
.icon-bulletin{position:absolute;right:12px;top:0px;font-size:10px;}
.background{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;filter:blur(10px);}

.detail{position:fixed;z-index:100;width:100%;height:100%;left:0;top:0;overflow:auto;background:rgba(7,17,27,0.8);backdrop-filter:blur(3px); }
.detail-wrapper{min-height:100%;width:100%;}
.detail-main{margin-top:64px;padding-bottom:64px;}
.detail-close{position:relative;width:32px;height:32px;margin:-64px auto 0 auto;clear:both;font-size:32px;}
.detail-close-icon{width:32px;height:32px;font-size:32px;}

.detail-name{line-height:16px;text-align:center;font-size:16px;font-weight:700;}

.detail-main .star-wrapper{margin-top:18px;padding:2px 0;text-align:center;}
.detail-main .title{width:80%;margin:28px auto 24px auto;display:flex;}
.detail-main .title .line{flex:1;position:relative;top:-6px;border-bottom:1px solid rgba(255,255,255,0.2);}
.detail-main .title .text{padding:0 12px;font-size:14px;font-weight:700;}

.supports{width:80%;margin:0 auto;}
.supports .support-item{padding:0 12px;margin-bottom:12px;font-size:0;}
.supports .support-item:last-child{margin-bottom:0;}
.supports .support-item .icon{display:inline-block;width:16px;height:16px;vertical-align:top;margin-right:6px;background-size:16px 16px;background-repeat:no-repeat;}
.supports .support-item .decrease
  bg-image('decrease_2')
.supports .support-item .discount
  bg-image('discount_2')
.supports .support-item .guarantee
  bg-image('guarantee_2')
.supports .support-item .invoice
  bg-image('invoice_2')
.supports .support-item .special
  bg-image('special_2')
.supports .support-item .text{line-height:16px;font-size:12px;}

.detail-main .bulletin{width:80%;margin:0 auto;}
.detail-main .bulletin .content{padding:0 12px;line-height:24px;font-size:12px;}

.fade-enter-active, .fade-leave-active {transition: opacity .5s;}
.fade-enter,.fade-leave-to{opacity: 0;}


</style>
